<template>
  <div class="wrap">
    <header>
      <div class="tou">
        <span @click="go">&lt;</span>
        <h3>我的</h3>
      </div>
    </header>
    <main>
      <div class="my1">
        <div class="my11">
          <dl>
            <dt>
              <img :src="name.img" alt />
            </dt>
            <dd>
              <h4>{{name.username}}</h4>
              <p>{{name.phone}}</p>
            </dd>
          </dl>
          <img src="../img/mes.png" alt @click="tomessage" />
        </div>
        <div class="my12">
          <dl @click="tofabu">
            <dt>
              <img src="../img/m1.png" alt />
            </dt>
            <dd>我的发布</dd>
          </dl>
          <dl @click="tocang">
            <dt>
              <img src="../img/m2.png" alt />
            </dt>
            <dd>收藏</dd>
          </dl>
          <dl @click="tohistory">
            <dt>
              <img src="../img/m3.png" alt />
            </dt>
            <dd>浏览历史</dd>
          </dl>
        </div>
      </div>
      <div class="my2">
        <div @click="topay">
          <p>支付明细</p>
          <span>></span>
        </div>
        <div @click="toquest">
          <p>问题反馈</p>
          <span>></span>
        </div>
        <div @click="tolianxi">
          <p>联系客服</p>
          <span>></span>
        </div>
      </div>
      <div class="tui" @click="tologin">
        <p>退出登录</p>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      name: ""
    };
  },
  created() {
    this.name = JSON.parse(localStorage.getItem("xhs"));
  },
  methods: {
    go() {
      this.$router.go(-1);
    },
    tomessage() {
      this.$router.push("/home/message");
    },
    tofabu() {
      this.$router.push("/home/fabu");
    },
    tocang() {
      this.$router.push("/cang");
    },
    tohistory() {
      this.$router.push("/history");
    },
    tologin() {
      this.$router.push("/login");
    },
    topay() {
      this.$router.push("/pay");
    },
    toquest() {
      this.$router.push("/quest");
    },
    tolianxi() {
      this.$router.push("/lianxi");
    }
  }
};
</script>

<style lang="scss">
.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 50px;
  background: rgb(72, 72, 225);
  .tou {
    display: flex;
    width: 100%;
    height: 50px;
    align-items: center;
    text-align: center;
    span {
      padding-left: 5%;
    }
    h3 {
      padding-left: 35%;
    }
  }
}
main {
  flex: 1;
  overflow-y: scroll;
  .my1 {
    margin: 15px 5%;
    width: 90%;
    height: 200px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 0 2px #ccc;
    .my11 {
      height: 100px;
      border-bottom: 1px solid #999;
      display: flex;
      align-items: center;
      padding: 10px;
      dl {
        display: flex;
        margin-right: 50px;
        dt img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
        dd {
          padding: 5px 15px;
          align-items: center;
          h4 {
            font-size: 16px;
          }
          p {
            padding-top: 15px;
            font-size: 14px;
          }
        }
      }
      img {
        width: 20px;
        height: 20px;
      }
    }
    .my12 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      padding: 10px;
      dl {
        padding: 5px;
        dt img {
          width: 35px;
          height: 35px;
        }
        dd {
          padding-top: 5px;
          font-size: 15px;
        }
      }
    }
  }
  .my2 {
    margin: 10px 5%;
    width: 90%;
    height: 165px;
    background: #f1f1f1;
    div {
      padding: 5px;
      display: flex;
      line-height: 40px;
      background: #fff;
      margin: 5px 0;
      justify-content: space-between;
    }
  }
  .tui {
    width: 90%;
    margin: 5px 5%;
    height: 50px;
    border-radius: 25px;
    background: rgb(231, 101, 53);
    margin-top: 30%;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-weight: bold;
  }
}
</style>